import React from 'react'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { locationTo } from '../../utils/LocationUtil';
import * as locations from '../../const/locations';
import {repaymentRecord} from '../../service/TaskService'
import { getTOKEN } from '../../utils/StorageUtil'
import {NOTASK} from '../components/Default'
import Scroll from '../components/Bscroll/index'
import ProgressView from "../../view/ProgressView";

class RepayList extends React.Component {
  constructor(props) {
    super(props)    
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 20;
    this.state={
      repay_data:[],
      loading: false
    }
  }
  componentDidMount() {
    document.title = '任务回款记录'
    this.getRepayRecords({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  getRepayRecords=(params)=>{
    this.setState({ loading: true });
    repaymentRecord({
      token: getTOKEN(),
      t_id: this.props.taskId,
      only_self:1,
      ...params
    })
      .then(
        res => {
          this.setState({ loading: false });
          this.setState({
            repay_data: res.data.data,
            isShowMore:res.data.data.length=== this.PER_PAGE,
            
          })
          this.props.setData(res.data)
          this.CURRENT_PAGE++;
          
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  pullingUp =()=>{
    this.getDelayList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  render() {
    const {task_info} = this.props.TaskData
    return (
      <div className={styles['home']} style={{ paddingTop: '10px' }} >
      <div  className={styles['container']} style={{ marginTop: '0',height:'99%' }} >     
        <Scroll
          ref='scroll'
          click={true}
          bounce={true}
          pullUpLoad={true}
          pullUpLoadMoreData={this.pullingUp}
          isPullUpTipHide={true}
          isShowMore={this.state.isShowMore}
        >
        <RepayTotal task_info={task_info} />        
        {this.state.repay_data.length ===0&& <NOTASK/>}      
        {this.state.repay_data.length >0&& 
        <RepayItems repayData={this.state.repay_data}/>
      } 
      </Scroll>
        
      </div>
      <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />        
      
      </div>
    )
  }
}
const RepayTotal = ({task_info:{repay_amount,received_rwd}}) => {
  return (
    <div className={styles['repay_total_wrapper']} style={{ color: '#fff' }} >

      <div className={styles['repay_total']}>

        <span >  总回款金额        </span>
        <span className={styles['repay_total_value']}>   {repay_amount}元        </span>
      </div><div className={styles['repay_total']}>

        <span > 总奖金：        </span>
        <span className={styles['repay_total_value']} >   {received_rwd}元        </span>
      </div>
    </div>
  )
}
const RepayItems = ({repayData}) => {
  return (
      <div className={styles['debt_data']}>
        <div className={styles['debt_data_list']}>        
          {
            repayData.map((item, index) => {
              return (
                <RepayItem key={index} item={item} />
              )
            })
          }
        </div>
      </div>
  )
}
const RepayItem = ({ 
   return_money,                  // 回款金额 (分)
create_time,    // 时间
reward_ratio,                    // 利率 (19% * 1000)
name,           // 催客姓名
}) => {
  return (

    <div className={styles['repay_item']}>

      <div className={styles['repay_item_line']}>
        <span className={styles['debt_key']} style={{fontSize:'16px'}}>回款金额： {return_money}</span>
      </div>
      <div className={styles['repay_item_line']}>

        <span className={styles['debt_value']} >
          奖金：{return_money*reward_ratio/10000}
        </span>
        <span className={styles['debt_key']}> {create_time}</span>
      </div>
    </div>
  )
}
const LINEHEIGHT = '56px'
const AVATARHEIGHT = '40px'
const avatarStyle = {
  width: AVATARHEIGHT,
  height: AVATARHEIGHT,
  borderRadius: '50%',
  marginRight: '10px',
  overflow: 'hidden'
}
const avatarImgStyle = {
  width: AVATARHEIGHT
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    taskTab(item) {
      let params = {
        taskTabIndex: item.taskTabIndex
      };
      dispatch(Actions.actionTaskTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(RepayList);